<template>
    <div class="teacherFileDetail">
        <el-card>
            <div class="teacherInfo">
                <img :src="teacherInfo.headmage" alt="">
                <div>
                    <p style="font-size: 20px;font-weight: 600;">{{ teacherInfo.name }}</p>
                    <div class="PersonalInfo">
                        <p>性别：<span>{{ teacherInfo.sex === '0' ? '男' : teacherInfo.sex === '1' ? '女' : '未知' }}</span></p>
                        <p>毕业院校：<span>{{ teacherInfo.graduateSchool }}</span></p>
                        <p>任教班级：<span>{{ teacherInfo.teacherClass }}</span></p>
                    </div>
                    <div class="briefIntroduction">
                        <p>简介：</p>
                        <span>{{ teacherInfo.introduction }}</span>
                    </div>
                </div>
            </div>
        </el-card>
        <el-card>
            <div>
                <p>健康证</p>
                <div style="margin: 10px 0;display: flex;">
                    <el-image style="width: 150px; height: 150px;margin-left: 10px;" v-for="item in healthInfo" :src="item.fileUrl" :key="item"
                        :preview-src-list="item.fileUrl">
                    </el-image>
                    <div class="addimg" @click="addroute">
                        +
                    </div>
                </div>
            </div>
        </el-card>
        <el-card>
            <div>
                <div style="display: flex; justify-content: space-between;">
                    <p>资质证明</p>
                </div>
                <div style="margin: 10px 0;display: flex;">
                    <el-image style="width: 150px; height: 150px;margin-right: 10px;" v-for="item in certificationsImage" :key="item"
                        :src="item" :preview-src-list="item">
                    </el-image>
                    <div class="addimg" @click="addCertifications">
                        +
                    </div>
                </div>
            </div>
        </el-card>
        <el-card>
            <div>
                <div style="display: flex; justify-content: space-between;">
                    <p>历史班级信息</p>
                    <div>
                        <el-button v-if="!historyClassFlag" type="text" icon="el-icon-edit"
                            @click="historyClassBtn"></el-button>
                        <div v-else>
                            <el-button size="mini" type="primary">保存</el-button>
                            <el-button size="mini" @click="historyClassBtn">取消</el-button>
                        </div>
                    </div>
                </div>
                <div style="margin: 10px 0;">
                    <el-upload v-if="historyClassFlag" action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card" :on-preview="HistoryClassPreview" :on-remove="HistoryClassRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog  :close-on-click-modal="false" :visible.sync="HistoryClassDialog">
                        <img width="100%" :src="HistoryClassImg" alt="">
                    </el-dialog>
                </div>
            </div>
        </el-card>
        <el-card>
            <div>
                <div style="display: flex; justify-content: space-between;">
                    <p>培训经历</p>
                    <el-button type="primary" size="mini" icon="el-icon-plus" @click="trainData">新增</el-button>
                </div>
                <el-table :data="trainDataList" style="width: 100%">
                    <el-table-column prop="dateStart" label="开始时间" width="180" align="center">
                    </el-table-column>
                    <el-table-column prop="dateEnd" label="结束时间" width="180" align="center">
                    </el-table-column>
                    <el-table-column prop="trainContent" label="培训内容" align="center">
                    </el-table-column>
                    <el-table-column prop="trainImg" label="图片" align="center">
                        <template slot-scope="scope">
                            <div>
                                <el-image style="width: 60px; height: 60px" :src="scope.row.trainImg"
                                    :preview-src-list="scope.row.trainImg">
                                </el-image>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <div>
                                <el-button size="mini" type="text" icon="el-icon-edit"
                                    @click="updateTrain(scope.row)">修改</el-button>
                                <el-button size="mini" type="text" icon="el-icon-delete"
                                    @click="deleteTrain(scope.row)">删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
        <el-card>
            <div>
                <div style="display: flex; justify-content: space-between;">
                    <p>工作经历</p>
                    <el-button type="primary" size="mini" icon="el-icon-plus" @click="addWorkList">新增</el-button>
                </div>
                <div style="margin: 10px 0;">
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column prop="dateStart" label="开始时间" width="180" align="center">
                        </el-table-column>
                        <el-table-column prop="dateEnd" label="结束时间" width="180" align="center">
                        </el-table-column>
                        <el-table-column prop="unit" label="公司名称" align="center">
                        </el-table-column>
                        <el-table-column prop="duties" label="担任职责" align="center">
                        </el-table-column>
                        <el-table-column prop="achievements" label="工作描述" align="center">
                        </el-table-column>
                        <el-table-column prop="address" label="操作" align="center">
                            <template slot-scope="scope">
                                <div>
                                    <el-button size="mini" type="text" icon="el-icon-edit"
                                        @click="workUpdate(scope.row)">修改</el-button>
                                    <el-button size="mini" type="text" icon="el-icon-delete"
                                        @click="workDelete(scope.row)">删除</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getList" /> -->
                </div>
            </div>
        </el-card>

        <el-dialog  :close-on-click-modal="false" :title="workType === '1' ? '新增工作经历' : '修改工作经历'" :visible.sync="addWorkVisible" width="30%"
            :before-close="handleClose" @close="handleClose"  >
            <el-form ref="queryParams" :rules="rules" :model="queryParams" label-width="80px" :inline="true">
                <el-form-item label="开始时间" prop="dateStart">
                    <el-date-picker v-model="queryParams.dateStart" value-format="yyyy-MM-dd" type="date"
                        placeholder="请选择开始时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="dateEnd">
                    <el-date-picker v-model="queryParams.dateEnd" value-format="yyyy-MM-dd" type="date"
                        placeholder="请选择结束时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="公司名称" prop="unit">
                    <el-input v-model="queryParams.unit" placeholder="请输入公司名称"></el-input>
                </el-form-item>
                <el-form-item label="担任职责" prop="duties">
                    <el-input v-model="queryParams.duties" placeholder="请输入担任职责"></el-input>
                </el-form-item>
                <el-form-item label="工作描述" prop="achievements">
                    <el-input v-model="queryParams.achievements" type="textarea" placeholder="请输入工作描述"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addWorkVisible = false">取 消</el-button>
                <el-button type="primary" @click="addWork">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog  :close-on-click-modal="false" :title="trainType === '1' ? '新增培训经历' : '修改培训经历'" :visible.sync="addTrainaVisible" width="30%"
            @close="trainaClose" :before-close="trainaClose"  >
            <el-form ref="queryParams" :rules="trainarules" :model="trainParams" label-width="80px" :inline="true">
                <el-form-item label="开始时间" prop="dateStart">
                    <el-date-picker v-model="trainParams.dateStart" value-format="yyyy-MM-dd" type="date"
                        placeholder="请选择开始时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="dateEnd">
                    <el-date-picker v-model="trainParams.dateEnd" value-format="yyyy-MM-dd" type="date"
                        placeholder="请选择结束时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="培训内容" prop="trainContent">
                    <el-input v-model="trainParams.trainContent" type="textarea" placeholder="请输入培训内容"></el-input>
                </el-form-item>
                <el-form-item label="上传图片">
                    <span @click="getDownLink(trainParams)" v-if="trainParams.fileName != null" class="downlink">{{
                        trainParams.fileName
                    }}</span>
                    <el-upload ref="upload" :limit="1" accept=".doc, .docx, .pdf, .jpg, .jpeg, .png"
                        :headers="upload.headers" :action="upload.url" :disabled="upload.isUploading"
                        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccessFj">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许上传文档或者图片文件！</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addTrainaVisible = false">取 消</el-button>
                <el-button type="primary" @click="addTraina">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { recordView, addInsert, updateInsert, deleteInsert, insertTeacherResume, updateTeacherResume, deleteTeacherResume, healthaddTeacher, updateCerData } from '@/api/base/teacher'
import { getToken } from "@/utils/auth";
import { downLoadword } from "@/utils/zipdownload";


export default {
    data() {
        return {
            id: '',
            HistoryClassImg: '', //历史班级信息图片
            HistoryClassDialog: false, //历史班级信息弹窗显示
            trainImg: '', //培训图片
            trainDialog: false, //培训弹窗显示
            tableData: [], //工作经历列表
            addWorkVisible: false,
            queryParams: {},
            trainParams: {}, //培训经历弹窗
            rules: {
                dateStart: [
                    { required: true, message: '请输入开始时间', trigger: 'blur' },
                ],
                dateEnd: [
                    { required: true, message: '请输入结束时间', trigger: 'blur' },
                ],
                unit: [
                    { required: true, message: '请输入公司名称', trigger: 'blur' },
                ],
                duties: [
                    { required: true, message: '请输入担任职责', trigger: 'blur' },
                ],
                achievements: [
                    { required: true, message: '请输入工作描述', trigger: 'blur' },
                ],
            },
            trainarules: {
                dateStart: [
                    { required: true, message: '请输入开始时间', trigger: 'blur' },
                ],
                dateEnd: [
                    { required: true, message: '请输入结束时间', trigger: 'blur' },
                ],
                trainContent: [
                    { required: true, message: '请输入培训内容', trigger: 'blur' },
                ],
            },
            total: 0,
            historyClassFlag: false, //历史班级显示编辑按钮
            teacherInfo: {}, //教师信息
            healthInfo: {}, //健康证信息
            certificationsInfo: {}, //学历证信息
            addTrainaVisible: false,
            trainDataList: [], //培训经历列表
            // 导入参数
            upload: {
                // 是否显示弹出层
                open: false,
                // 弹出层标题
                title: "",
                // 是否禁用上传
                isUploading: false,
                // 是否更新已经存在的数据
                updateSupport: 0,
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },
                // 上传的地址
                url: process.env.VUE_APP_BASE_API + "/common/upload"
            },
            trainType: '1',
            workType: '1',
            certificationsImage: [],
        };
    },
    async created() {
        this.id = this.$route.query.id
        await this.getDetail()
        this.certificationsInfo.forEach(item => {
            this.certificationsImage.push(item.filePhoto)
        })
    },
    mounted() {
    },
    methods: {
        //添加培训经历
        async addTraina() {
            this.trainParams.teacherId = this.id
            const { data, msg, code } = this.trainType === '1' ? await addInsert(this.trainParams) : await updateInsert(this.trainParams)
            if (code === 200) {
                this.getDetail()
                this.addTrainaVisible = false
                this.$message.success(msg)
            }
        },
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true;
        },
        // 文件上传成功处理
        handleFileSuccessFj(response, file, fileList) {
            this.upload.open = false;
            this.upload.isUploading = false;
            this.trainParams.trainImg = response.url
            this.trainParams.fileName = response.fileName
            this.$refs.upload.clearFiles();
        },
        /** 下载附件链接 */
        getDownLink(row) {
            if (row.fileName && row.trainImg) {
                downLoadword('/common/eos/download?fileName=' + row.fileName, row.trainImg)
            }
        },
        //修改培训经历
        updateTrain(row) {
            this.trainType = '2'
            this.trainParams = { ...row }
            this.addTrainaVisible = true
        },
        //删除培训经历
        async deleteTrain(row) {
            const { code, msg } = await deleteInsert(row.id)
            if (code === 200) {
                this.$message.success(msg)
                this.getDetail()
            } else {
                this.$message.error(msg)
            }
        },
        async getDetail() {
            try {
                const { data, code, msg } = await recordView(this.id)
                this.teacherInfo = data.teacherInfo //教师信息
                this.healthInfo = data.health //健康证
                this.certificationsInfo = data.certifications //学历证

                this.trainDataList = data.train  //培训经历
                this.tableData = data.teacherResumes  //工作经历
            } catch (error) {
                console.log(error)
            }

        },
        //添加工作经历
        async addWork() {
            this.queryParams.teacherId = this.id
            const { data, msg, code } = this.workType === '1' ? await insertTeacherResume(this.queryParams) : await updateTeacherResume(this.queryParams)
            if (code === 200) {
                this.getDetail()
                this.addWorkVisible = false
                this.$message.success(msg)
            }
        },
        //修改工作经历
        workUpdate(row) {
            this.workType = '2'
            this.queryParams = { ...row }
            this.addWorkVisible = true
        },
        //删除工作经历
        async workDelete(row) {
            const params = {
                id: row.id
            }
            const { code, msg } = await deleteTeacherResume(params)
            if (code === 200) {
                this.getDetail()
                this.$message.success(msg)
            } else {
                this.$message.error(msg)
            }

        },
        //健康证跳转
        addroute() {
            this.$router.push({ path: '/baseSystem/jzhxxgl/jkzmgl' })
        },
        //资质证跳转
        addCertifications() {
            this.$router.push({ path: '/teacherPlan/certificatequery' })
        },
        // 历史班级信息证
        HistoryClassPreview(file) {
            this.HistoryClassImg = file.url;
            this.HistoryClassDialog = true;
        },
        // 历史班级信息证
        HistoryClassRemove(file, fileList) {
            console.log(file, fileList);
        },
        //工作经历关闭弹框
        handleClose() {
            this.queryParams = {}
            this.addWorkVisible = false
        },
        //添加工作经历
        addWorkList() {
            this.workType = '1'
            this.addWorkVisible = true
        },
        //新增培训经历
        trainData() {
            this.trainType = '1'
            this.addTrainaVisible = true
        },
        //关闭培训经历
        trainaClose() {
            this.trainParams = {}
            this.addTrainaVisible = false
        },
        getList() {

        },
        //点击历史班级信息编辑按钮显示编辑
        historyClassBtn() {
            this.historyClassFlag = !this.historyClassFlag
        },
    },
};
</script>

<style scoped lang="scss">
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.el-button {
    padding: 8px 15px;
}

.el-form-item {
    margin-bottom: 20px;
}

.teacherFileDetail {
    padding: 20px;

    .el-card {
        margin-bottom: 20px;
    }

    .teacherInfo {
        display: flex;
        align-items: center;
        font-size: 16px;
        padding: 10px 20px;

        img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            margin-right: 30px;
        }

        .PersonalInfo {
            display: flex;
            justify-content: space-between;
            margin: 10px 0;
            width: 600px;

            p {
                color: #999999;
                font-size: 14px;

                span {

                    font-size: 15px;
                    font-weight: 600;
                    color: #333333;
                }
            }
        }

        .briefIntroduction {
            display: flex;

            p {
                color: #333333;
                font-size: 15px;
                font-weight: 600;
                width: 75px;

            }

            span {
                color: #999999;
                font-size: 14px;
            }
        }
    }

    .addimg {
        width: 150px;
        height: 150px;
        color: #ddd;
        border-radius: 5px;
        border: 1px solid #ddd;
        font-size: 30px;
        text-align: center;
        line-height: 150px;
        margin-left: 10px;
    }
}
</style>
